<template>
  <el-dialog
    v-if="showUnitEventDialogFlag"
    v-dialog-drag
    :title="'组件事件处理'"
    :visible.sync="showUnitEventDialogFlag"
    :show-close="true"
    class="small-padding-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
  >
    <el-alert type="info" :closable="false" :title="eventHeader" />
    <code-editor
      ref="aceEditor"
      v-model="renderCode"
      :mode="mode"
      :readonly="false"
      class="aceEditor"
      @onMenuCall="customMenu"
    />
    <el-alert type="info" :closable="false" title="}" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="runClose()">
        {{ i18nt("designer.hint.cancel") }}
      </el-button>
      <el-button type="primary" @click="saveEventHandler">
        {{ i18nt("designer.hint.confirm") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import CodeEditor from "Yan/components/code-editor/index";
import $MenuJs from "Yan/utils/extendContextMenu";
import i18n from "Yan/utils/i18n";
export default {
  components: { CodeEditor },
  mixins: [i18n],
  props: {
    selectedId: String,
    pluginLib: Object,
    eventHeader: String,
    eventHandlerCode: String,
    mode: {
      type: String,
      default: "javascript",
    },
    onSave: Function,
    runClose: Function,
  },
  data() {
    return {
      showUnitEventDialogFlag: false,
      renderCode: "",
    };
  },
  async mounted() {
    this.renderCode = this.eventHandlerCode;
    await this.$nextTick();
    this.showUnitEventDialogFlag = true;
    // this.
  },
  //   async beforeDestroy() {
  //     await sleep(200);
  //     return true;
  //   },
  methods: {
    close() {
      this.showUnitEventDialogFlag = false;
    },
    /**
     * 自定义右键事件
     * @author Yan
     * @detail 方便插入当前表字段，用于字段的深入关联
     */
    customMenu(e) {
      //   console.log("customMenu", e);
      const { selectedId, pluginLib } = this;
      const { fieldLib } = pluginLib;
      let menu = Object.keys(fieldLib).filter((i) => i !== selectedId);
      // table内的字段可以监听外部字段，外部字段不可以监听内部
      if (selectedId.indexOf("table_") === -1) {
        menu = menu.filter((i) => i.indexOf("table_") === -1);
      }
      // console.log("ddd", selectedId, fieldLib, menu);
      if (menu.length > 0) {
        $MenuJs(e, {
          title: "插入表内字段",
          menu: menu.map((i) => ({
            label: `${
              fieldLib[i].options.label || fieldLib[i].options.tableLabel
            }【${i}】`,
            handler: () => this.aceInsert(i),
          })),
          ElementKey: ".aceEditor",
        });
      }
    },
    aceInsert(i) {
      const { fieldLib } = this.pluginLib;
      //   console.log("插入表内字段=>", i, fieldLib[i].options.label);
      this.$refs.aceEditor.aceEditor.insert(
        `$${i}%${fieldLib[i].options.label || fieldLib[i].options.tableLabel}$`
      );
    },
    saveEventHandler() {
      const codeHints = this.$refs.aceEditor.getEditorAnnotations();
      let syntaxErrorFlag = false;
      if (!!codeHints && codeHints.length > 0) {
        codeHints.forEach((chItem) => {
          if (chItem.type === "error") {
            syntaxErrorFlag = true;
          }
        });

        if (syntaxErrorFlag) {
          this.$message.error(
            this.i18nt("designer.setting.syntaxCheckWarning")
          );
          return;
        }
      }

      if (this.onSave) this.onSave(this.renderCode);
      //   this.optionModel[this.curEventName] = this.eventHandlerCode;
      //   this.showWidgetEventDialogFlag = false;
    },
  },
};
</script>